<template>
    <div style="height: 90%;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 订单管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/orderdetails' }">订单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="big-bg">
            <div class="top">
                <p class="title"><i class="el-icon-s-platform" style="font-size: 25px;"></i>订单详情</p>
                <el-button type="primary" style="height: 40px; width: 100px;" @click="ccc">返回</el-button>
            </div>

            <hr>

            <div class="tabel">
                <el-descriptions class="margin-top" :column="2" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            订单编号
                        </template>
                        {{ tableDate[0].id }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            服务编号
                        </template>
                        {{ tableDate[0].sid }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            核销码
                        </template>
                        111
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            商家名称
                        </template>
                        {{ tableDate[0].name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            买家
                        </template>
                        {{ tableDate[0].username }} {{ tableDate[0].phone }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            订单状态
                        </template>
                        {{ tableDate[0].state }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            下单时间
                        </template>
                        {{ tableDate[0].pladate }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            预约时间
                        </template>
                        {{ tableDate[0].predate }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            原价
                        </template>
                        {{ tableDate[0].originalprice }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            优惠
                        </template>
                        {{ tableDate[0].price }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            实付金额
                        </template>
                        {{ tableDate[0].presentprice }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            服务内容
                        </template>
                        {{ tableDate[0].serviceitem }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <hr>
        </div>
    </div>
</template>

<script>
import tool from './tool'
export default {
    data() {
        return {
            tableDate: [],
        }
    },
    async mounted() {
        // console.log(this.$route.query);
        let result = await tool.select(this.$route.query);
        this.tableDate = result[0];
        // console.log(result[0]);
    },
    methods: {
        ccc() {
            this.$router.back();
        }
    }
}
</script>

<style scoped>
.big-bg {
    background-color: #fff;
    height: 92%;
    padding: 0 30px;
}

.top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.title {
    font-weight: bolder;
    padding: 20px 0;
    margin: 0;
}
</style>